今天要介紹的這幾種偽類 pseudo-class，算是 CSS 中使用率最頻繁的幾個，
我自己很常忘記這幾個的優先權順序，所以特地寫一篇筆記下來。

什麼是偽類？

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

CSS 偽類是一個加在選擇器後方的關鍵字，可以指定被選取的元素在特殊的狀態下的表現。

MDN

這五個分別是什麼？

• :link 連結未被訪問過
• :visited 連結已被訪問過
• :focus 元素被聚焦
• :hover 滑鼠游標移到元素上
• :active 滑鼠點擊到放開前

其中，focus 的狀態好像是最難讓人看懂的，
舉例來說，在網頁中點擊tab的時候，會出現藍色的外框，
這個狀態就是 focus，
但因為這個樣式是可以被修改的，所以現在許多頁面內容被聚焦時，
跑出來的樣式就不一定是藍色外框了。

在 MDN 網頁上點擊tab時的狀態

那順序為什麼重要？

因為 CSS 在選取器層級相同的情況下，會有後面蓋前面的特性
舉例來說

<p>猜猜我是什麼顏色</p>

p {
 color: green;
}

p {
 color: orange;
 }

p 段落會顯示為橘色，就是因為後面的 CSS 蓋掉了前面的 CSS 設定

所以順序是？

其實 MDN 裡面就有提到一個 LVHA-order，
就是 :link -> :visited -> :hover -> :active，
這算是一個記憶方式啦，但我覺得拿例子來看也是一種學習方式

這個的例子就留到明天再說，
以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。